<template>
    <div class="login-wrap">
        <div class="ms-title">forest管理系统</div>
        <div class="ms-login">
            <h4 v-model="message" class="message">{{message}}</h4>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
                <el-form-item prop="username">
                    <el-input v-model="ruleForm.username" placeholder="账号"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" placeholder="密码" v-model="ruleForm.password">
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-col :span="14">
                        <el-input v-model="ruleForm.captcha" placeholder="验证码"  :disabled="captchaVisible"></el-input>
                    </el-col>
                    <el-col :span="10">
                        <img src="/api/captcha" id="captcha" height="36px" @click="captchaClick()"/>
                    </el-col>
                </el-form-item>
                <el-form-item>
                    <el-checkbox v-model="ruleForm.remember">记住我</el-checkbox>
                </el-form-item>
                <div class="login-btn">
                    <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script>
    export default {
        data: function () {
            return {
                captchaVisible: false,
                ruleForm: {
                    username: '',
                    password: '',
                    remember: false,
                    captcha: ''
                },
                rules: {
                    username: [
                        {required: true, message: '请输入账号', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'}
                    ]
                },
                message: ''
            }
        },
        created() {
            this.getCaptchaOnOff();
        },
        methods: {
            submitForm(formName) {
                const self = this;
                self.$refs[formName].validate((valid) => {
                    if (valid) {
                        localStorage.setItem('ms_username', self.ruleForm.username);
                        // 登录
                        self.$axios.post('/api/login', self.ruleForm)
                            .then(function (response) {
                                console.log(response);
                                self.$router.push('/home');
                            })
                            .catch(function (error) {
                                console.log('error', error);
                                if (error.response) {
                                    self.message = error.response.data.msg;
                                } else {
                                    console.log('error', error.message);
                                    self.$message({
                                        message: "网络异常",
                                        type: 'error'
                                    });
                                }
                            });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            getCaptchaOnOff(){
                const self = this;
                self.$axios.get('/api/captcha/getCaptchaOnOff', self.ruleForm)
                    .then(function (response) {
                        console.log(response);
                        self.captchaVisible=!response.data;
                    })
            },
            captchaClick(){
                document.getElementById("captcha").src="/api/captcha";
            }
        }
    }
</script>

<style scoped>
    .login-wrap {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .ms-title {
        position: absolute;
        top: 50%;
        width: 100%;
        margin-top: -230px;
        text-align: center;
        font-size: 30px;
        color: #fff;

    }

    .ms-login {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 300px;
        margin: -150px 0 0 -190px;
        padding: 40px;
        border-radius: 5px;
        background: #fff;
    }

    .login-btn {
        text-align: center;
    }

    .login-btn button {
        width: 100%;
        height: 36px;
    }

    .message {
        text-align: center;
        color: red;
        height: 20px;
        margin-bottom: 15px;
    }
</style>
